<template>
  <div>
    <!-- 文本框组件 -->
    <div class="textBox">
      <div class="titleBox">
        <slot name="titleName"></slot>
      </div>
      <div class="inputBox">
        <slot name="textBox"></slot>
      </div>

      <!-- <textBox>
        <span slot="titleName">医院:</span>
        <input
          slot="textBox"
          class="textBoxSize"
          type="text"
        />
      </textBox> -->

      <!-- 1.给slot标签元素添加样式是无效的 2.给slot标签元素注册事件也是无效的 3总结:因为solt没有注册事件@也没有普通标签的属性-->

    </div>
  </div>
</template>

<script>
export default {
  methods: {
    borderIsShow() {
      console.log("聚焦了");
      this.$refs.borderStyle.style.border = "0.1rem solid #fe77b0";
    }
  }
};
</script>

<style lang='scss' scoped>
.textBox {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  box-sizing: border-box;
  text-align: right;
  .titleBox {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    font-size: 2.2rem;
    padding-right: 2rem;
  }
  .inputBox {
    flex: 1.8;
    display: flex;
    .textBoxSize {
      width: 100%;
      height: 4.6rem;
      border-radius: 0.2rem;
      border: 0.1rem solid #888888;
      outline: none;
      background-color: #0f0f1f;
      color: #eeeeee;
      font-size: 1.8rem;
      padding: 0 2rem;
      flex: 2;
    }
    .textBoxSize:hover {
      border: 0.1rem solid #fe77b0;
      box-shadow: 0 0 0.2rem rgba(254, 166, 204, 0.8);
    }
  }
}
</style>
